<template>
  <div>
    <div class="recommend-title"><h1 class="title">推荐商品</h1></div>
    <div class="recommend-content">
      <ul>
        <li
          v-for="item of list"
          :key="item.id"
          class="item">
          <div class="item-img-wrapper">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <div class="item-number">
              <p class="item-money">￥<span>{{item.money}}</span></p>
              <p class="item-money-before">￥{{item.moneyBefore}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
  // data () {
  //   return {
  //     recommendList: [
  //       {
  //         id: '001',
  //         imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg',
  //         title: '民宿一日游免费体验哦',
  //         money: '1313',
  //         moneyBefore: '1888'
  //       },
  //       {
  //         id: '002',
  //         imgUrl: require('style/test4.png'),
  //         title: '石原里美真美',
  //         money: '1313',
  //         moneyBefore: '1888'
  //       }
  //     ]
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .recommend-title
    border-bottom: 1px solid #f2f2f2;
    flexColumn()
    padding-bottom: .2rem;
    font-weight: 500;
    font-size: .34rem;
    margin: .46rem 0 .2rem 0
    .title
      display: flex;
      flex-direction: row;
      align-items: center;
      &:after
        content '\e6f9'
        font-size: .46rem;
        iconfont()
  .recommend-content
    margin-bottom: 1.4rem;
  .item
    width: calc(50% - 10px);
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    margin: 4px;
    .item-img-wrapper
      overflow: hidden;
      height: 3.68rem;
      img
        width: 100%;
        height: 100%;
        object-fit: cover;
    .item-info
      padding-top: .1rem;
      border-top: 1px solid #f2f2f2;
      line-height: 1.8;
      color: #1b1b1b;
      font-weight: 500;
      .item-title
        font-size: .28rem;
        $firstFC = #333
        ellipsis()
      .item-number
        display: flex;
        .item-money
          flex: 1;
          color: $miguFC
          font-size: .24rem;
          span
            font-size .32rem
        .item-money-before
          flex: 1;
          text-align: right;
          text-decoration: line-through;
          color: #999;
          font-size: .24rem;
</style>
